import { Swiper, SwiperItem, View, Image } from "@tarojs/components";
import Search from "@/components/public/Search";
import star from "@/assets/image/star.png";
import tou_right from "@/assets/image/tou_right.svg";
import tou_left from "@/assets/image/tou_left.svg";
import "./index.scss";
import clsx from "clsx";
import { link, linkWithParams, makePhoneCall } from "@/helper/utils";
import { routes } from "@/constants/routes";
import { useState } from "react";
import ico_phone_new from "@/assets/image/ico_phone_new.svg";

import {
  addIndex,
  classifyAddIndexGet,
  classifyList,
} from "@/services/entities/all";
import { useDidShow, useShareAppMessage, useShareTimeline } from "@tarojs/taro";

const IndexPage = () => {
  const [list, setList] = useState<any>([]);
  const [banner, setBanner] = useState<any>([]);
  useDidShow(() => {
    classifyAddIndexGet().then((res: any) => {
      console.log("banner", res);
      setBanner(res);
    });
    classifyList({}).then((res: any) => {
      console.log("res", res);
      setList(res);
    });
    addIndex();
  });

  useShareAppMessage(() => ({
    title: "首页",
    path: `/pages/init/index?route=ROUTES_INDEX&action=switch`,
  }));

  useShareTimeline(() => ({
    title: "首页",
  }));

  return (
    <View className="no-bg-page">
      <View className="dis-flex align-center pd-lr-20">
        <Search
          className="flex-1"
          disabled={true}
          placeholder="输入产品，品牌，商家等均可查找"
          onClick={() => {
            link(routes.ROUTES_SEARCH);
          }}
        />
      </View>
      <Swiper
        className="mt-16 swiper"
        indicatorColor="#999"
        indicatorActiveColor="#333"
        circular
        indicatorDots
        autoplay
      >
        {banner?.map((item) => {
          return (
            <SwiperItem key={item.id}>
              <Image
                className="banner-img"
                onClick={() => {
                  linkWithParams(routes.ROUTES_SHOP_DETAIL, {
                    storeId: item.storeId,
                  });
                }}
                src={item.imageUrl}
              />
            </SwiperItem>
          );
        })}
      </Swiper>
      <View className="list-container">
        {list?.map((item, index) => {
          return (
            <View
              key={item.name}
              className={clsx(
                "pd-tb-30",
                index < list.length - 1 ? "bottom-line" : ""
              )}
            >
              <View className="dis-flex justify-center align-center mb-44">
                <Image className="card-line" src={tou_left}></Image>
                <View className="mg-lr-26">{item.name}</View>
                <Image className="card-line" src={tou_right}></Image>
              </View>
              <View className="single">
                {item.list?.map((child) => {
                  return (
                    <View
                      className="child flex-column align-center"
                      key={child.id}
                      onClick={() => {
                        linkWithParams(routes.ROUTES_TOOL, {
                          id: child.id,
                          title: child.name,
                        });
                      }}
                    >
                      <View className="img-92 br-46 overflow-hidden">
                        <Image
                          className="child-img"
                          src={child.icon || star}
                        ></Image>
                      </View>
                      <View className="flex-column">
                        {child.name.split("/").map((single, idx) => {
                          return (
                            <View className="txt-center" key={idx}>
                              {single}
                            </View>
                          );
                        })}
                      </View>
                    </View>
                  );
                })}
              </View>
              {item.advertisementList?.length > 0 && (
                <Swiper
                  className="mt-16 swiper-type"
                  indicatorColor="#999"
                  indicatorActiveColor="#333"
                  circular
                  indicatorDots
                  autoplay
                >
                  {item.advertisementList?.map((single) => {
                    return (
                      <SwiperItem
                        key={single.id}
                        onClick={() => {
                          linkWithParams(routes.ROUTES_SHOP_DETAIL, {
                            storeId: single.storeId,
                          });
                        }}
                      >
                        <Image className="banner-img" src={single.imageUrl} />
                      </SwiperItem>
                    );
                  })}
                </Swiper>
              )}
            </View>
          );
        })}
      </View>
      <View className="bg-ffffff concat flex-center">
        <View className="phone flex-center">
          <Image
            src={ico_phone_new}
            onClick={() => {
              makePhoneCall('18581852720');
            }}
            className="img-80"
          ></Image>
        </View>
        <View className="mg-lr-12 fs-32">客服电话</View>
      </View>
    </View>
  );
};

export default IndexPage;
